<!DOCTYPE html>
<CFPARAM Name="URL.contractID" defualt="">
<head>
	<title>File Upload</title>
	<script>
	$( document ).ready(function() {
    		console.log( "ready!" );
    		$('#submitFrm').on("click", function(e){
    			e.preventDefault();
    			console.log("Form Submited");
				$.each($('#multiFile')[0].files, function(i, file) {
					var data = new FormData();
    			    data.append('contractID', $('#contractID').val());
    				data.append('file-0', file);
					console.log("file data appended to FormData() number:" + i);
					ajaxUpload(data);
    
				});
				
			
    		});
    		
    		function ajaxUpload(data){
    		console.log("ajaxUpload function called");
    		$.ajax({url: "multiFileUploadAction.cfm",
					data: data,
					cache: false,
					contentType: false,
					processData: false,
					type: 'POST',
					success: function(returnData){
								console.log(returnData);
								 },
					error: function(returnData){
								console.log(returnData);
								 }
					});
			}
	});
	</script>
	<style>

	</style>
</head>
<body>
	<form action="multiFileUploadAction.cfm" Method="POST" enctype="multipart/form-data" class="well" id="multiFileFrm">
		<input type="file" name="multiFile" id="multiFile" multiple />
		<button class="btn btn-primary" id="submitFrm" >Submit</button>
		<cfoutput><input type="hidden" Name="contractID" id="contractID" value="#URL.contractID#"></cfoutput>
	</form>
</body>
</html>